<template>
	
	<div>
		<header>
			<img src="../../assets/img/add.png" class="add" />
			<div class="sousuokuang">
				<span class="sousuo">搜索食谱、食材</span>
			</div>
			<img src="../../assets/img/cai.png" class="bag" />
		</header>

		<div class="neirong">
			<div class="xuanxiang">
				<div class="xuan1">
					<a href="#">
						<div class="img1">

						</div>
						<div class="text1">
							烘焙优惠
						</div>
					</a>
				</div>
				<div class="xuan1">
					<a href="#">
						<div class="img1">

						</div>
						<div class="text1">
							厨房问答
						</div>
					</a>
				</div>
				<div class="xuan1">
					<a href="#">
						<div class="img1">

						</div>
						<div class="text1">
							排行榜
						</div>
					</a>
				</div>
				<div class="xuan1">
					<a href="#">
						<div class="img1">

						</div>
						<div class="text1">
							菜谱分类
						</div>
					</a>
				</div>
			</div>

			<div class="liuxingcaipin">
				<div id="liuxingcaipinimg"></div>
				<div id="haoyouguanzhui"></div>

			</div>
			
			<!--<div>
				<div class="zaocan">
					<div class="bird"></div>
					<h3>—早餐—</h3>
					<p>3416 作品</p>
					<div class="waa"></div>
					<div class="huise"></div>
				</div>
				<div class="zaocan">
					<div class="bird"></div>
					<h3>—早餐—</h3>
					<p>3416 作品</p>
					<div class="waa1"></div>
					<div class="huise"></div>
				</div>
			</div>-->
			
			<div v-if="lunbo">
				<swiper :options="swiperOption"  ref="mySwiper" >  
		            <!-- 这部分放你要渲染的那些内容 -->  
		            <swiper-slide v-for="i in lunbo">  
		            	<div class="zaocan" >
							<div class="bird"></div>
							<h3>—{{i.desc}}—</h3>
							<p>{{i.count}} 作品</p>
							<div class="waa">
								<img :src="i.image" alt="" />
							</div>
							<div class="huise"></div>
						</div>
						<!--<div class="zaocan">
							<div class="bird"></div>
							<h3>—早餐—</h3>
							<p>3416 作品</p>
							<div class="waa1"></div>
							<div class="huise"></div>
						</div>-->
		            </swiper-slide>  
		            <!-- 这是轮播的小圆点 -->  
		            <div class="swiper-pagination" slot="pagination"></div>  
		        </swiper>  
			</div>
			
			

			<div class="fangunba">
				<p>2月26日 星期一</p>
				<div class="fangunbaimg">

				</div>
			</div>
			<div id="wenzi">
				<p class="meimei">
					亚洲航空与四位美厨娘的寻味东南亚...
				</p>
				<img src="../../assets/img/guanggao.png" />
			</div >
      		
			<div class="xiaoketang">
				<div class="biaoti1">
					<img src="../../assets/img/shawanyi.png"/>
					<p class="shawanyip">厨studio课堂</p>
					<a class="shawanyia">查看全部</a>
				</div>
				<div class="huatongtu" v-if="dataList">
					<div class="scroll">
						
						<div id="huatongtu1" v-for="item in dataList">
							<a :href="item.url">
								<img :src="item.image.url_pattern | s" />
								<p class="p1">{{item.name}}</p>
								<p class="p2">讲师：{{item.lecturer_name}}</p>
							</a>
						</div>
						
					</div>
				</div>
			</div>
			
			<div class="caipu" v-if="courseList" v-for="item in courseList">
				<img :src="item.image"/>
				<div class="little">
					<p>{{item.title}}</p>
					<p>{{item.desc}}</p>
				</div>
			</div>
			
			<!--<div v-for="item in courseList">
				<div class="ketang" v-if="item.contents.name">
					
				</div>
				<div v-else>
					
				</div>
			</div>-->
			
		</div>
	</div>
	
</template>

<script>
	import {swiper, swiperSlide } from 'vue-awesome-swiper' ;
	export default {
		data(){
			return {
				dataList: [],
				courseList:[],
				lunbo:[],
				swiperOption: {  
                	pagination: '.swiper-pagination',  
                	autoplay: 2000,
                	loop: true
				}  
			}
		},
		methods:{
			request(){
				this.$http({
					url: 'http://localhost:8080/request'
				}).then(function(req){
					
					this.dataList = req.body.content.issues[0].items[0].contents.courses;
//					console.log(this.dataList[0].url);
				});
			},
			course(){
				this.$http({
					url: '/static/data.json',
					method:'GET'
				}).then(function(req){
//					console.log(req.bodyText);
					this.courseList = JSON.parse(req.bodyText).items;
//					console.log(this.courseList);
				});
			},
			swiperr(){
				this.$http({
					url:'/static/swiper.json'
				}).then(function(req){
					console.log(req.body);
					this.lunbo = req.body.items;
				})
			}
		},
		mounted(){
			this.request(),
			this.course(),
			this.swiperr()
		},
		filters: {
			s(data){
				var u = '';
				if(data.indexOf('?') == -1){
					u = data.split('@')[0];
				}else{
					u = data.split('?')[0];
				}
				
				return u;
			}
		},
		components: {  
            swiper,  
            swiperSlide  
        }, 
        computed: {  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        }
	}
	
</script>

<style scoped>
	
	header{
		width: 100%;
		height:1.6826rem;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	.neirong{
		position: absolute;
		left: 0;
		right: 0;
		top:1.6826rem;
		bottom:0rem;
		overflow: auto;
	}
	.add{
		width: 0.5865rem;
		height: 0.6346rem;
		position: absolute;
		top: 0.6057rem;
		left: 0.4038rem;
	}
	.sousuokuang{
		height:1.1538rem ;
		position: absolute;
		top:0.2884rem;
		background: #f2f2f0;
		/*margin:auto;*/
		width: 70%;
		left:15%;
	}
	.sousuo{
		font-size: 0.4326rem;
		color: #95958f;
		font-family:"楷体";
		line-height:1.1538rem ;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1.15rem;
		position: absolute;
		left: 2.1rem;
		display: block;
		
	}
	.sousuo:before{
		content: "";
		display: block;
		background-image: url(../../assets/img/search.png);
		width:0.8692rem;
		height:0.673rem;
		background-repeat: no-repeat;
		position: absolute;
		left:-0.65rem;
		top: .22rem;
		background-size: auto 100%;
	}
	.bag{
		width: 0.6442rem;
		height: 0.673rem;
		position: absolute;
		right:0.5769rem;
		top:0.625rem;
	}
	.xuanxiang{
		width: 100%;
		height: 2.6538rem;
		  position: relative;
	  left: 0;
	  right: 0;
	
	  display: flex;
	}
	.xuanxiang .xuan1{
	  width: 20%;
	  position: relative;
	  top:0.7019rem;
	}
	
	.xuanxiang .xuan1 .img1{
	  height: 0.6538rem;
	  background-size: auto 100%;
	  background-image:url(../../assets/img/hongbei.png);
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.xuanxiang .xuan1 .text1{
	  text-align: center;
	  margin-top: .15rem;
	   color: black;
	   font-family:"楷体";
	  
	}
	.xuanxiang .xuan1 a{
		text-decoration:none;
	}
	.xuanxiang .xuan1{
	  padding: .25rem;
	}
	.xuanxiang .xuan1:nth-child(2) .img1{
	  background-image: url(../../assets/img/question.png);
	}
	.xuanxiang .xuan1:nth-child(3) .img1{
	  background-image: url(../../assets/img/paihangbang.png);
	}
	.xuanxiang .xuan1:nth-child(4) .img1{
	  background-image:url(../../assets/img/catalog.png);
	}
	
	.liuxingcaipin{
		width: 100%;
		height: 3.2403rem;
		  position: relative;
	  left: 0;
	  top:0;
	  display: flex;
	}
	#liuxingcaipinimg{
		background-image: url(../../assets/img/liuxingcai.png);
		width: 4.4903rem;
		height:2.8846rem;
		position: absolute;
		left:0.3461rem;
		top: 0.2115rem;
			background-size:auto 100% ;
	}
	#haoyouguanzhui{
		background-image: url(../../assets/img/haoyouguanzhui.png);
		width: 4.4903rem;
		height: 2.8846rem;
		position: absolute;
		left: 5rem;
		top:0.2115rem;
		background-size:auto 100% ;
		
	}
	.zaocan{
		width: 100%;
		height: 2.8557rem;
		position: relative;
	  left: 0;
	  top:0;
	}
	.bird{
		background-image: url(../../assets/img/ji.png);
		width: 3.1057rem;
		height: 2.5384rem;
		background-size:100% 100% ;
		position: absolute;
	  left: 0;
	  top:0;
		
	}
	.waa{
		width: 1.7788rem;
		height:1.8269rem;
		position: absolute;
	    left:7.75rem;
	  	top:0.4326rem;
	}
	.waa img{
		width:1.634615rem;
		height: 1.634615rem;
	}
	.zaocan h3{
		position: absolute;
		left: 4rem;
		top:0.6923rem;
		font-size: 0.4326rem;
		 font-family:"楷体";
		
	}
	.zaocan p{
		position: absolute;
		left:4.31rem;
		top:1.4615rem;
		font-size: 0.2403rem;
		 font-family:"楷体";
		 color: #a0a09a;
		
	}
	.huise{
		width:100%;
		height: 0.2884rem;
		position: absolute;
	    left: 0;
	    bottom: 0;
	    background-color: #fafaf8;
	}
	
	.fangunba{
		width: 100%;
		height:4.0961rem;
		position: relative;
	  left: 0;
	  top:0;
	}
	.fangunbaimg{
		background-image: url(../../assets/img/fangunba.png);
		width: 100%;
		height: 2.6923rem;
		position: absolute;
	  left: 0;
	  top: 1.4814rem;
	  background-size:100% 100% ;
	}
	.fangunba p{
		font-size:0.3365rem ;
		font-family: "楷体";
		position: absolute;
	  left: 3.89rem;
	  top: 0.4903rem;
	}
	#wenzi{
		width: 100%;
		height:1.0961rem;
		position: relative;
	    left: 0;
	}
	#wenzi .meimei{
		font-size:0.2129rem;
		position: absolute;
		left: 0.4038rem;
		top: 0.423rem;
		font-family: "楷体";
	}
	#wenzi img{
		width:1.5384rem ;
		height: 0.6538rem;
		position: absolute;
		left:7.6923rem;
		top: 0.3rem;
	}
	.xiaoketang{
		width: 100%;
		height: 9.7037rem;
		border-top:solid 0.01923rem #eaeae0;
		border-bottom:solid 0.01923rem #eaeae0;
		position: relative;
		left: 0;
	}
	.biaoti1 img{
		width:0.6018rem ;
		height: 0.5092rem;
		position: absolute;
		left: 0.574rem;
		top: 0.5925rem;
	}
	.biaoti1 p{
		position: absolute;
		left:1.2685rem;
		top:0.6944rem;
		font-size: 0.3425rem;
		font-family:"楷体";
	}
	.biaoti1 a{
		position: absolute;
		left:7.9166rem;
		top:0.6944rem;
		font-size: 0.3425rem;
		font-family:"楷体";
		color:#fa6650;
	}
	.huatongtu{
		width: 100%;
		height: 8.2592rem;
		position: absolute;
		left: 0;
		bottom: 0;
		white-space: nowrap;
		overflow-x: scroll;
		
	}
	.scroll{
		display: flex;
	}
	#huatongtu1{
		width: 4.6018rem;
		height: 8.2592rem;
		
		
	}
	#huatongtu1 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	#huatongtu1 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu1 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu2{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu2 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	#huatongtu3{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu3 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu4{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu4 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	#huatongtu5{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu5 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu6{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu6 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu7{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu7 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu8{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu8 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu9{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu9 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	
	#huatongtu10{
		width: 4.6018rem;
		height: 8.2592rem;
		
	}
	#huatongtu10 img{
		width: 4.3148rem;
		height: 6.4814rem;
	}
	#huatongtu2 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu2 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu3 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu3 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu4 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu4 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu5 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu5 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu6 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu6 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu7 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu7 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	
	#huatongtu8 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu8 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu9 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu9 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	#huatongtu1 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu1 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}#huatongtu10 .p1{
		position: relative;
		left: 0.5833rem;
		top: 0.25rem;
		font-size: 0.3333rem;
		font-family: "楷体";
	}
	#huatongtu10 .p2{
		position: relative;
		left: 0.5833rem;
		top: 0.324rem;
		font-size: 0.2222rem;
		color: #95958f;
		font-family: "楷体";
	}
	
	.caipu{
		width: 100%;
		height: 6.6666rem;
		position: relative;
		left: 0;
		border-bottom:solid 0.01923rem #eaeae0;
	}
	.caipu img{
		width: 8.8888rem;
		height: 5.5833rem;
		position: absolute;
		left:0.5555rem ;
		top: 0.5833rem;
	}
	.little{
		width:8.8888rem;
		height:5.5833rem;
		background: rgba(0,0,0,0.5);
		position: absolute;
		left:0.5555rem ;
		top: 0.5833rem;
		color:white;
	}
	.little p{
		margin:auto;
	}
	.little p:nth-child(1){
		width:70%;
		font-size:0.451923rem;
		text-align: center;
		margin-bottom:0.76923rem;
		margin-top:15%;
	}
	.little p:nth-child(2){
		width:70%;
		font-size:0.451923rem;
		text-align: center;
	}
	.caipu2{
		width: 100%;
		height: 6.6666rem;
		position: relative;
		left: 0;
		border-bottom:solid 1px #eaeae0;
		
	}
	.caipu2 img{
		width: 8.8888rem;
		height: 5.5833rem;
		position: absolute;
		left:0.5555rem ;
		top: 0.5833rem;
	}
	#egg{
		width: 100%;
		height: 9.037rem;
		position: relative;
		left: 0;
		border-bottom:solid 1px #eaeae0;
	}
	#egg img{
		width: 8.9166rem;
		height: 5.0925rem;
		position: absolute;
		left:0.537rem ;
		top: 0.5555rem;
	}
	#egg h3{
		font-size: 0.5648rem;
		font-family: "楷体";
		position: absolute;
		left:0.537rem ;
		top: 6.3425rem;
	}
	#egg p{
		font-size:0.324rem ;
		font-family: "楷体";
		position: absolute;
		left:0.537rem ;
		top: 8.1018rem;
	}
	
</style>